<template>
  <div class="layout">
  <Layout>
    <Header class="header-full">
      <Menu mode="horizontal" theme="dark" active-name="1">
        <div class="layout-logo"><img src="static/images/bom.png"/></div>
        <div class="layout-nav">
          <MenuItem name="1">
            <Icon type="ios-navigate"></Icon>
            <span @click="thisIndex1" >主页</span>
          </MenuItem>
          <MenuItem name="2">
            <Icon type="ios-keypad"></Icon>
            <span @click="thisIndex2" >公司环境</span>
          </MenuItem>
          <MenuItem name="3">
            <Icon type="ios-analytics"></Icon>
            <span @click="thisIndex3" >招贤纳士</span>
          </MenuItem>
          <MenuItem name="4">
            <Icon type="ios-paper"></Icon>
            <span @click="thisIndex4" >技术支持</span>
          </MenuItem>
        </div>
      </Menu>
    </Header>
    <Content>
      <div class="content">
        <div class="row" v-for="item in list">
          <img class="img-class" :src="item.img"/>
          <div class="right-div">
            <div class="mid-size">{{ item.name }}</div>
            <div class="mid1-size">{{ item.desc }}</div>
          </div>
        </div>
        <div class="row">
          <div class="item-div">
            <img src="static/images/cat3.jpg"/>
            <p>无毛猫</p>
            <p style="text-indent: 2em;">加拿大无毛猫，亦称斯芬克斯猫。这种猫是自然的基因突变产生的宠物猫，除了在耳、口、 鼻、尾前锻、脚等部位有些又薄又软的胎毛外，其它全身部分均无毛，皮肤多皱有弹性。加拿大无毛猫性情温顺，独立性强，无攻击性，能与其它猫狗相处。</p>
          </div>
          <div class="item-div">
            <img src="static/images/cat4.jpeg"/>
            <p>暹罗猫</p>
            <p style="text-indent: 2em;">暹罗猫是世界著名的短毛猫，也是短毛猫的代表品种。种族原产于暹罗（今泰国），故名暹罗猫。在200多年前，这种珍贵的猫仅在泰国的皇宫和大寺院中饲养，是足不出户的贵族。暹罗猫能够较好适应主人当地的气候，且性格刚烈好动，机智灵活，好奇心特强，善解人意 </p></div>
          <div class="item-div">
            <img src="static/images/cat5.jpg"/>
            <p>苏格兰折耳猫</p>
              <p style="text-indent: 2em;">苏格兰折耳猫是猫的一种在耳朵有基因突变的猫种。由于这猫种最初在苏格兰发现，所以以它的发现地和身体特征而命名。这种猫在软骨部份有一个折，使耳朵向前屈折，并指向头的前方。它乐意与人为伴，并用它特有的这种安宁的方式来表达。</p>
          </div>
        </div>
        </div>
    </Content>
    <Footer class="layout-footer-center">2018-2020 &copy; TalkingData</Footer>
  </Layout>
  </div>
</template>

<script>
    export default {
        name: "index.vue",
      data () {
        return {
          list:[{
            img:'../static/images/cat1.jpg',
            name:'布偶猫',
            desc:'布偶猫，又称“布拉多尔”，发源于美国，是一种杂交品种宠物猫。是现存体型最大、体重最重的猫之一。头呈楔形，眼大而圆，被毛丰厚，四肢较长且富有肉感，尾长，身体柔软，毛色有重点色、手套色或双色等等。布偶猫较为温顺好静，对人友善。'
          },{
            img:'../static/images/cat2.jpg',
            name:'美国短毛猫',
            desc:'美国短毛猫，又称美洲短毛虎纹猫。1971年，其被选为美国最好的猫种之一。美国短毛猫素以体格魁伟，骨胳粗壮，肌肉发达，生性聪明，性格温顺而著称，是短毛猫类中大型品种。被毛厚密，毛色多达30余种，其中银色条纹品种尤为名贵。'
          }]
        }
      },methods: {
        thisIndex2: function(){
          this.$router.push({path:'/HelloWorld'})
        },
        thisIndex1: function(){
          this.$router.push({path:'/'})
        },
        thisIndex3: function(){
          this.$router.push({path:'/recruit'})
        },
        thisIndex4: function(){
          this.$router.push({path:'/Technology'})
        }
      }
    }
</script>

<style lang="stylus" scoped type="text/stylus">
  .header-full {
    padding 0
  }
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;

    .layout-logo{
      width: 100px;
      height: 30px;
      background: #5b6270;
      border-radius: 3px;
      float: left;
      position: relative;
      top: 15px;
      left: 20px;
      img{
        width 30%
        height 30px
      }
    }
    .layout-nav{
      width: 450px;
      margin: 0 auto;
      margin-right: 20px;
    }
    .layout-footer-center{
      text-align: center;
    }
    .content {
      background-color gainsboro;
      .row{
        overflow hidden;
        margin-bottom 10px;
        .img-class {
          float left;
          width 100%;
          height 450px;
        }
        .right-class {
          float right;
        }
        .right-div {
          overflow hidden;
          padding 5px 10px;
          height 100%;
          text-align center
          .mid-size{
            font-size:22px;
            color: red
          }
          .mid1-size{
            font-size:18px;
            color: darkslategray
            margin-right:0px;
            text-align left;
          }
        }
        .item-div {
          float left;
          width 33.3%;
          img {
            width 100%;
            height 300px;
          }
          p {
            font-size 14px;
            text-align left;
          }
        }
      }
    }
  }
</style>
